import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import {Link, withRouter} from 'react-router-dom';
import cssModules from 'react-css-modules';
import styles from '../../index.less';
import moment from 'moment';
class Calibration extends Component {
  render() {
    const {startPoint, endPoint} = this.props;

    return (
      <line
        x1={startPoint.x}
        y1={startPoint.y}
        x2={endPoint.x}
        y2={endPoint.y}
        stroke="#42e5fb"
        strokeWidth="2"
        strokeLinecap="round"
      />
    );
  }
}

@cssModules(styles)
class Dashboard extends Component {
  state = {
    startX: 55.20619187268767,
    startY: 212.56838308944293,
    endX: 214.79380812731233,
    endY: 212.56838308944293,
  };
  cal = (r, angle) => {
    const cx = 135;
    const cy = 127;
    const s_angle = -137;
    let radian = ((s_angle + angle) * 2 * Math.PI) / 360;
    let x = cx + r * Math.sin(radian);
    let y = cy - r * Math.cos(radian);

    return {x, y};
  };
  // drawCalibration = () => {
  //   let array = [];
  //   for (let i = 0; i <= 274; i = i + 4) {
  //     let startPoint = this.cal(108, i);
  //     let endPoint = this.cal(100, i);
  //     array.push(
  //       <Calibration
  //         key={i.toString(36) + i}
  //         startPoint={{
  //           x: startPoint.x,
  //           y: startPoint.y,
  //         }}
  //         endPoint={{
  //           x: endPoint.x,
  //           y: endPoint.y,
  //         }}
  //       />,
  //     );
  //   }
  //   return array;
  // };
  render() {
    const {value = '-', limit = '-', unit = '', diffDay} = this.props;
    let ratio = value / limit;
    const max = 274;
    const r = 117;
    let axis = this.cal(r, max * ratio);
    // const AllCalibratioin = this.drawCalibration();

    return (
      <svg width="274" height="290" xmlns="http://www.w3.org/2000/svg">
        {/* <defs> */}
        {/*   <linearGradient id="g0"> */}
        {/*     <stop offset="0" stopColor="#ff1f48" /> */}
        {/*     <stop offset="0.03" stopColor="#ff5a1f" /> */}
        {/*     <stop offset="0.15" stopColor="#ffc31f" /> */}
        {/*     <stop offset="0.5" stopColor="#d6ff1f" /> */}
        {/*     <stop offset="0.85" stopColor="#1fff3d" /> */}
        {/*     <stop offset="1" stopColor="#1ffbff" /> */}
        {/*   </linearGradient> */}
        {/* </defs> */}
        <path
          d={`M ${this.state.startX || 0},${this.state.startY ||
            0} A 117,117 0 1,1 ${this.state.endX || 0},${this.state.endY ||
            0} `}
          stroke="#114569"
          strokeLinecap="round"
          strokeWidth="16"
          fill="none"
        />
        {value && value !== '-' && Number(value) !== 0 && (
          <path
            d={`M ${this.state.startX || 0},${this.state.startY ||
              0} A 117,117 0 ${max * ratio > 180 ? 1 : 0},1 ${axis.x},${
              axis.y
            }`}
            stroke="#09ee80"
            strokeLinecap="round"
            strokeWidth="16"
            fill="none"
          />
        )}

        {/* <g>{this.drawCalibration()}</g> */}
        <g textAnchor="middle">
          <text x="135" y="127" styleName={'c-ratio'}>
            {`${((value / limit) * 100).toFixed(1)}%`}
          </text>
          <text x="135" y="169" styleName={'c-value'}>
            {`${value}${unit}/${limit}${unit}`}
          </text>
          <text x="135" y="257" styleName={'c-load'}>
            总负荷
          </text>
          {/* <text x="135" y="285" styleName={'c-day'}> */}
          {/*   {`已安全运行${diffDay}天`} */}
          {/* </text> */}
        </g>
      </svg>
    );
  }
}

export default Dashboard;
